<template>
  <div class="components-white-header" v-if="isShowTopNav">
    <div class="header">
      <div class="header_left" @click="onClickLeft">
        <van-icon
          v-if="isShowBack"
          name="arrow-left"
          style="margin-left:.2rem;"
        />
      </div>
      <div class="center_title">{{ title }}</div>
      <div class="header_right" v-if="!type || rightText">
        <span
          v-if="title == '分销提现'"
          @click="$router.push('/m/withdrawal-log')"
          >记录</span
        >
        <span class="right-text" @click="onClickRight">
          {{ rightText }}
        </span>
        <!-- <img v-if="isShowSearch" src="/img/mobile/index_nav_search.png" alt="" @click="onClickRight"> -->
      </div>
    </div>
    <div class="fixed-box"></div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  props: [
    "isShowTopNav",
    "isShowBack",
    "title",
    "isShowRight",
    "handleClickLeft",
    "rightText",
    "handleClickRight"
  ],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      is_mobile(state) {
        return state.is_mobile;
      },
    }),
    type() {
      return this.$route.query.type;
    }
  },
  watch: {},
  methods: {
    onClickLeft() {
      if (this.handleClickLeft) {
        this.handleClickLeft();
        return;
      }
      if (this.$route.name == "Mclassify") {
        this.$router.replace("/m/classify");
      } else {
        if(window.history.length <= 1){
          if(this.is_mobile){
            this.$router.push({path:'/m'})
          }else{
            this.$router.push({path:'/'})
          }
          return;
        }
        this.$router.back();
      }
    },
    onClickRight() {
      this.handleClickRight && this.handleClickRight();
      // if (this.$route.path == "/m/course") {
      //   return this.$router.push("/m/classify");
      // }
      // this.$router.push("/m/classify?action=search");
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.components-white-header {
}
</style>
<style lang="scss">
@import "assets/css/root.scss";
.components-white-header {
  width: 7.2rem;
  // height: 0.8rem;
  // overflow: hidden;
  // z-index: 99999;
  // position: relative;
  .fixed-box {
    width: 7.2rem;
    height: 0.8rem;
  }
  .header {
    width: 7.2rem;
    height: 0.8rem;
    // z-index: 999999;
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0.8rem;
    //background-color: var(--theme-color);
    background: #ffffff;
    display: flex;
    align-items: center;
    box-shadow: none;
    border-bottom: 0.026rem solid #f7f7fa;
    .header_left {
      width: 20%;
      // width: 15%;
      //background-color: var(--theme-color);
      background: #ffffff;
      //color: #ffffff;
      //justify-content: center;
      font-size: 0.35rem;
      display: flex;
      align-items: center;
    }
    .center_title {
      // width: 70%;
      width: 60%;
      text-align: center;
      font-size: 0.3456rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      //   color: #ffffff;
    }
    .header_right {
      text-align: center;
      // width: 15%;
      width: 20%;
      font-size: 0.3456rem;
      // background:var(--theme-color);
      background: #ffffff;
      white-space: nowrap;
      // background: #fff;

      img {
        margin: 0 auto;
        display: block;
        width: 0.6111rem;
        height: 0.6111rem;
      }
      .right-text {
        display: block;
        transform: translateX(-0.2rem);
        font-family: PingFangSC-Regular;
        font-size: 0.269rem;
        font-weight: bold;
        color: var(--theme-color);
      }
    }
  }
  .van-nav-bar {
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 7.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    // background-color: var(--theme-color);
    background: #ffffff;
    .van-nav-bar__arrow {
      font-size: 0.35rem;
    }
    .van-nav-bar__left,
    .van-nav-bar__right {
      padding: 0.16rem;
      > i {
        font-size: 0.35rem;
        color: #fff;
      }
    }
    .van-nav-bar__text {
      font-size: 0.24rem;
    }
    .van-nav-bar__title {
      font-size: 0.28rem;
      color: #fff;
    }
  }
}
</style>
